<template>
  <div class="bg-dark text-white font-sans min-h-screen">
    <!-- 隐私政策内容 -->
    <div class="pt-24 container mx-auto px-4 pb-12">
      <h1 class="text-3xl md:text-4xl font-bold mb-8 text-primary">隐私政策</h1>
      <div class="prose prose-invert max-w-none">
        <p>
          本隐私政策阐述了狂速科技SAAS如何收集、使用、披露和保护您的个人信息。通过使用我们的服务，即表示您同意本隐私政策中所述的做法。</p>

        <h2>信息收集</h2>
        <p>我们可能会收集以下类型的个人信息：</p>
        <ul>
          <li>注册信息，如姓名、电子邮件地址、电话号码等。</li>
          <li>使用服务时产生的信息，如访问记录、操作日志等。</li>
          <li>支付信息，如银行卡号、支付记录等（通过第三方支付平台收集）。</li>
        </ul>

        <h2>信息使用</h2>
        <p>我们收集的个人信息将用于以下目的：</p>
        <ul>
          <li>提供和维护我们的服务。</li>
          <li>改善和优化我们的服务。</li>
          <li>与您沟通，回复您的咨询和反馈。</li>
          <li>处理支付和开具发票。</li>
        </ul>

        <h2>信息披露</h2>
        <p>我们不会将您的个人信息出售给第三方。但在以下情况下，我们可能会披露您的个人信息：</p>
        <ul>
          <li>获得您的明确同意。</li>
          <li>遵守法律法规或响应合法的政府请求。</li>
          <li>保护我们的合法权益，如防止欺诈、侵权等。</li>
          <li>与第三方服务提供商合作，以提供更好的服务。</li>
        </ul>

        <h2>信息保护</h2>
        <p>
          我们采取合理的技术和管理措施，以保护您的个人信息免受未经授权的访问、使用或披露。但请注意，没有任何一种互联网传输方式或电子存储方式是100%安全的。</p>

        <h2>您的权利</h2>
        <p>您有权访问、更正、删除您的个人信息，或限制我们对您个人信息的使用。如果您有相关需求，请联系我们的客服团队。</p>

        <h2>隐私政策的变更</h2>
        <p>
          我们可能会根据业务发展和法律法规的变化，对本隐私政策进行更新。更新后的隐私政策将在我们的网站上公布。请您定期查看本隐私政策。</p>

        <h2>联系我们</h2>
        <p>如果您对本隐私政策有任何疑问或建议，请通过以下方式联系我们：</p>
        <ul>
          <li>电子邮件：<a href="mailto:support@example.com">support@example.com</a></li>
          <li>电话：+86 123456789</li>
        </ul>
      </div>
    </div>

    <!-- 回到顶部按钮 -->
    <button @click="scrollToTop" id="back-to-top"
            class="fixed bottom-8 right-8 bg-primary text-white p-3 rounded-full opacity-0 invisible transition-all duration-300 hover:bg-primary/90">
      <i class="fa fa-chevron-up"></i>
    </button>
  </div>
</template>

<script>
export default {
  name: 'PrivacyPolicyView',
  data() {
    return {
      isMobileMenuOpen: false,
      navbar: null,
      backToTop: null
    };
  },
  mounted() {
    this.navbar = document.getElementById('navbar');
    this.backToTop = document.getElementById('back-to-top');

    window.addEventListener('scroll', this.handleScroll);
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    toggleMobileMenu() {
      this.isMobileMenuOpen = !this.isMobileMenuOpen;
      const mobileMenu = document.getElementById('mobile-menu');
      if (this.isMobileMenuOpen) {
        mobileMenu.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
      } else {
        mobileMenu.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
      }
    },
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      if (scrollTop > 50) {
        this.navbar.classList.add('bg-dark', 'shadow-md');
      } else {
        this.navbar.classList.remove('bg-dark', 'shadow-md');
      }

      if (scrollTop > 300) {
        this.backToTop.classList.add('opacity-100', 'visible');
      } else {
        this.backToTop.classList.remove('opacity-100', 'visible');
      }
    },
    handleResize() {
      if (window.innerWidth >= 768) {
        this.isMobileMenuOpen = false;
        const mobileMenu = document.getElementById('mobile-menu');
        mobileMenu.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
      }
    },
    handleSmoothScroll(e) {
      e.preventDefault();
      if (this.isMobileMenuOpen) {
        this.toggleMobileMenu();
      }

      const targetId = e.currentTarget.getAttribute('href');
      if (targetId === '#') return;

      const targetElement = document.querySelector(targetId);
      if (targetElement) {
        window.scrollTo({
          top: targetElement.offsetTop - 80,
          behavior: 'smooth'
        });
      }
    },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    }
  }
};
</script>

<style scoped lang="scss">
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }

  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  .bg-gradient-blue {
    background: linear-gradient(135deg, #48b6ff, #2e6cf1);
  }

  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(72, 182, 255, 0.1);
  }

  .card-glow {
    box-shadow: 0 0 15px rgba(72, 182, 255, 0.1);
  }
}
</style>
